import React, { Component } from 'react'
//引入redux
import {connect} from 'react-redux'
import {Toast,List,InputItem,Picker,Button,WhiteSpace,Result} from 'antd-mobile'
import axios from 'axios'
import ajaxCall from '../../../utils/JsOperation/ajaxFilter'
//引入头部
import TextHeaderWithNav from '../../../components/Headers/TextHeaderWithNav/index'
import {serverDomain} from "../../../common/config/wxConfig";

class ApplyForShare extends Component {
    constructor(props){
        super(props)
        this.state={
            realname:'',
            phone:'',
            wechat:'',
            provinces:[],                       //可以选择的省
            provinceActive:{value:"北京"},    //已经pick的省
            provinceDefault:{},                 //默认pick的省
            province:'-请选择-',                //选择的省名
            citys:[],                           //可以pick的市
            cityActive:{value:"北京"},        //已经pick的市
            cityDefault:{},                     //市picker的默认值
            city:'',                            //选择的市名
            areas:[],
            areaActive:{value:"北京"},
            areaDefault:{},
            area:'',
            applyResult: 'not yet'  //not yet表示还未申请，waiting表示正在审核中，success表示审核成功
        }
    }
    submit(){
        let that = this;
        let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (this.state.realname === "") {
            Toast.info("请填写真实姓名");
        } else if (this.state.phone === "") {
            Toast.info("请填写手机号码");
        } else if (!myreg.test(this.state.phone)) {
            Toast.info("手机号码有误");
        } else if (this.state.wechat===""){
            Toast.info("请填写微信号");
        } else if (this.state.province === '-请选择-' || this.state.province ==="") {
            Toast.info("请选择省份");
        } else if (this.state.city === '-请选择-' || this.state.city ==="") {
            Toast.info("请选择市");
        } else if (this.state.area === '-请选择-'|| this.state.area ==="") {
            Toast.info("请选择区");
        } else {
            var params = {
                // token: getToken(),
                provinceId: parseInt(this.state.provinceDefault.id),
                cityId: parseInt(this.state.cityDefault.id),
                countyId: parseInt(this.state.areaDefault.id),
                address: this.state.address,
                phone: parseInt(this.state.phone),
                realName: this.state.realName
            };
            params.provinceName = this.state.provinceDefault.cname;
            params.cityName = this.state.cityDefault.cname;
            params.countyName = this.state.areaDefault.cname;
            console.log(params)
            ajaxCall({
                type:'post',
                data:params,
                url:serverDomain+'/submitApplyForShare',
                success:res=>{
                    this.setState({
                        applyResult:res.data.applyResult
                    })
                },
                error(){
                    Toast.info('新增失败',1);
                }
            })
        }
    }

    getApplyStatus(){
        ajaxCall({
            type:'get',
            url:serverDomain+'/getApplyStatus',
            success:res=>{
                this.setState({
                    applyResult:res.data.applyResult
                })
            },
            error(){
                Toast.info('网络出错',1);
            }
        })
    }

    getAddressArea(parentId,level,type,cb){
        (async ()=>{
            let params={
                parentId:parentId,
                level:level
            }
            let {data} = await axios.get(serverDomain+'/area/list',{
                params:params
            }).then(res=>res);
            console.log(data)
            this.setState({
                [type]:data.data.data.map(item=>{
                    return {
                        ...item,
                        value:item.id,
                        label:item.cname
                    }
                })
            })
            cb&&cb()
        })()
    }

    onChangeValue=(v,k)=>{
        this.setState({
            [k]:v
        })
    }

    componentDidMount(){
        this.getApplyStatus();
        this.getAddressArea('',1,'provinces')
    }
    render() {
        return (
            <div>
                <TextHeaderWithNav returnbtn={true} title="推广大使申请" pathname="/my"></TextHeaderWithNav>
                {
                    this.state.applyResult === 'not yet'
                        ? (
                            <>
                                <List>
                                    <InputItem
                                        value={this.state.realname}
                                        placeholder='请填写真实姓名'
                                        onChange={(v) => {
                                            this.onChangeValue(v, 'realname')
                                        }}
                                    >
                                        真实姓名
                                    </InputItem>
                                    <InputItem
                                        value={this.state.phone}
                                        placeholder='请填写联系电话'
                                        onChange={(v) => {
                                            this.onChangeValue(v, 'phone')
                                        }}
                                    >
                                        手机号
                                    </InputItem>
                                    <InputItem
                                        value={this.state.wechat}
                                        placeholder='请填写您的微信号'
                                        onChange={(v) => {
                                            this.onChangeValue(v, 'wechat')
                                        }}
                                    >
                                        微信号
                                    </InputItem>
                                    <Picker
                                        data={this.state.provinces}
                                        cols={this.state.cols}
                                        value={[this.state.provinceActive.value]}
                                        onPickerChange={(v) => {
                                            let prov = this.state.provinces.filter((item) => {
                                                if (v[0] === item.id) {
                                                    return item
                                                }
                                            })
                                            this.setState({
                                                provinceActive: prov[0]
                                            })
                                            return true;
                                        }}
                                        onOk={v => {
                                            let prov = this.state.provinces.filter(item => {
                                                if (v[0] === item.id) {
                                                    return item
                                                }
                                            })
                                            console.log(prov)
                                            this.setState({
                                                provinceDefault: prov[0],
                                                province: prov[0].cname,
                                                cityDefault: {},
                                                cityActive: {value: '110000'},
                                                city: '-请选择-',
                                                areaDefault: {},
                                                areaActive: {value: '110000'},
                                                area: ''
                                            })
                                            this.getAddressArea(prov[0].id, 2, 'citys')
                                            return true;
                                        }}
                                    >
                                        <List.Item arrow="horizontal">所在省</List.Item>
                                    </Picker>
                                    <Picker
                                        data={this.state.citys}
                                        cols={this.state.cols}
                                        value={[this.state.cityActive.value]}
                                        onPickerChange={(v) => {
                                            console.log(v)
                                            let prov = this.state.citys.filter(item => {
                                                if (v[0] === item.id) {
                                                    return item
                                                }
                                            })
                                            this.setState({
                                                cityActive: prov[0]
                                            })
                                            return true;
                                        }}
                                        onOk={v => {
                                            let prov = this.state.citys.filter(item => {
                                                if (v[0] === item.id) {
                                                    return item
                                                }
                                            })
                                            console.log(prov)
                                            this.setState({
                                                cityDefault: prov[0],
                                                city: prov[0].cname,
                                                areaActive: {value: '110000'},
                                                areaDefault: {},
                                                area: '-请选择-'
                                            })
                                            this.getAddressArea(prov[0].id, 3, 'areas')
                                            return true;
                                        }}
                                    >
                                        <List.Item arrow="horizontal">所在市</List.Item>
                                    </Picker>
                                    <Picker
                                        data={this.state.areas}
                                        cols={this.state.cols}
                                        value={[this.state.areaActive.value]}
                                        onPickerChange={(v) => {
                                            console.log(v)
                                            let prov = this.state.areas.filter(item => {
                                                if (v[0] === item.id) {
                                                    return item
                                                }
                                            })
                                            this.setState({
                                                areaActive: prov[0]
                                            })
                                            return true;
                                        }}
                                        onOk={v => {
                                            let prov = this.state.areas.filter(item => {
                                                if (v[0] === item.id) {
                                                    return item
                                                }
                                            })
                                            console.log(prov)
                                            this.setState({
                                                areaDefault: prov[0],
                                                area: prov[0].cname
                                            })
                                            return true;
                                        }}
                                    >
                                        <List.Item arrow="horizontal">所在区</List.Item>
                                    </Picker>
                                </List>
                                <WhiteSpace/>
                                <Button type='primary' onClick={() => {
                                    this.submit()
                                }}>提交</Button>
                            </>
                        ) : this.state.applyResult === 'waiting'
                        ? (
                            <Result
                                imgUrl={require('../../../assets/ApplyForResult/dengdai.svg')}
                                title='审核中'
                            >

                            </Result>
                        ) : this.state.applyResult === 'success'
                            ? (
                                <Result
                                    imgUrl={require('../../../assets/ApplyForResult/chenggong.svg')}
                                    title='您已经是推广大使了'
                                >

                                </Result>
                            ) : '出错'
                }

            </div>
        );
    }
}
export default ApplyForShare
